<template>
    <div class="paging-root clearfix">
        <ul >
            <li><a href="#" class="active">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">...</a></li>
        </ul>
        <input type="number" value="7867">
        <a class="next-page" href="#">下一页</a>
    </div>
</template>

<script>
    export default {
        name: "my-paging"
    }
</script>

<style scoped>
    .paging-root{
        width: 500px;
    }
    .paging-root li a{
        float: left;
        width: 35px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #ffffff;
        border: 1px solid #e5e5e5;
        margin-right: 15px;
        transition: color,background-color 500ms 0ms;

    }
    .paging-root li a.active{
        background-color: #ef4238;
        color: #ffffff;
    }
    .paging-root li a:hover:not(.active),.next-page:hover{
        background-color: #e5342a;
        color: #ffffff;
    }

    input{
        height: 30px;
        width: 70px;
        text-align: center;
        float: left;
        margin-right: 15px;
    }
    .next-page{
        float: left;
        text-align: center;
        display: block;
        height: 30px;
        width: 70px;
        line-height: 30px;
        border: 1px solid #e5e5e5;
        transition: color,background-color 500ms 0ms;

    }
</style>
